﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>华南人资系统</title>
    <link rel="stylesheet" href="~/layui/css/layui.css">
</head>
<body>
    <style type="text/css">
        #dept_main, #dept_particulars {
            width: 48.5%;
            display: inline-block;
            vertical-align: top;
            padding: 20px;
            background: white;
            box-sizing: border-box;
        }

        #dept_tree {
            margin-top: 20px;
        }

        .layui-form-label {
            width: auto
        }

    </style>

    <div id="dept_main" class="layui-card">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>组织架构</legend>
        </fieldset>
        <div class="layui-btn-container">
            <button type="button" class="layui-btn layui-btn-normal" id="AddEL">增加同级</button>
            <button type="button" class="layui-btn layui-btn-normal" id="AddChild">增加下级</button>
            <button type="button" class="layui-btn layui-btn-normal" id="Update">修改</button>
        </div>
        <div id="Org_dept">
            <div class="layui-tree-emptyText">加载中...</div>
        </div>
        <form class="layui-form" action="" lay-filter="example">
            <input type="hidden" name="ID" autocomplete="off" placeholder="组织ID" class="layui-input">
        </form>
    </div>

    <div id="dept_particulars" class="layui-card">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>组织部门详情</legend>
        </fieldset>
        <div id="dept_home">
        </div>
    </div>
    <script src="~/layui/layui.js"></script>
    <script>
        layui.use(['form', 'util', 'laydate', 'tree'], function () {
            var form = layui.form;
            var layer = layui.layer;
            var util = layui.util;
            var laydate = layui.laydate;
            var tree = layui.tree;

            //渲染组织树
            var inst1 = tree.render({
                elem: '#Org_dept',  //绑定元素
                data: getOrgTreeData(),
                id: 'treeId',
                showCheckbox: false,     //是否显示复选框
                onlyIconControl: true,  //是否仅允许节点左侧图标控制展开收缩
                click: function (obj) {
                    $("#dept_home").load("../Orgs/Details/" + obj.data.id);
                    //表单赋值
                    form.val('example', {
                        "ID": obj.data.id,
                        "OrgID": obj.data.OrgId,
                        "ParentOrgID": obj.data.PId
                    });
                }
            });

            //增加同级
            layui.$('#AddEL').on('click', function () {
                var data = form.val('example');
                $("#dept_home").load("../Orgs/Create/" + data.ID);
            });

            //增加下级
            layui.$('#AddChild').on('click', function () {
                var data = form.val('example');
                $("#dept_home").load("../Orgs/CreateChild/" + data.ID);
            });


            //修改
            layui.$('#Update').on('click', function () {
                var data = form.val('example');
                $("#dept_home").load("../Orgs/Edit/" + data.ID);
            });

        });

        function getOrgTreeData() {
            var data = [];
            $.ajax({
                url: "/TreeData/GetOrgTreeDataParams",    //后台数据请求地址
                type: "post",
                async: false,
                success: function (resut) {
                    data = resut;
                }
            });
            return data;
        }
    </script>
</body>
</html>
